<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" mode=""></image>
			<comDetailNavigateBack title="赏袋" />
			<view class="bag-page">
				
				<view class="bag-page-content">
					<view class="tabbar-box flex flex-justify-content-between relative">
						<view class="tabbar-box flex">
							<view class="tabbar-box-item flex flex-justify-content-center flex-align-items-center relative"
								v-for="(item, index) in tabAreaList" :key="index" @click="tabTypeClick(item.type)">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" class="bg"
									:src="bagOperType === item.type ? `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab-active.png` : `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab.png`"
									mode=""> </image>
								<text
									:class="['relative font-hanserif-bold', bagOperType === item.type ? 'active' : '']">{{ item.text }}</text>
							</view>
						</view>
					</view>
				
					<view class="absolute bag-sort-box flex flex-direction-column" v-show="showBagSort" :style="{
							backgroundImage: `url(${commonConfigs.domainFrontFileLink}/files/images/bag/sort-content-bg.png)`
						}">
						<view
							:class="['bag-sort-item flex flex-justify-content-center flex-align-items-center relative', bagSortIndex === item.order_field && item.active ? 'active' : '']"
							v-for="item in bagSortList" :key="item.order_field" @click.stop="changeBagSortType(item)">
							<text class="font-hanserif-regular">{{ item.name }}</text>
							<image v-if="bagSortIndex === item.order_field && (commonConfigs && commonConfigs.domainFrontFileLink)"
								class="bag-sort-icon"
								:src="item.active ? `${commonConfigs.domainFrontFileLink}/files/images/bag/rise-icon.png`:`${commonConfigs.domainFrontFileLink}/files/images/bag/decline-icon.png`"
								mode=""></image>
						</view>
					</view>
				
					<view class="relative flex flex-justify-content-between tab-chooses"
						v-if="['bag', 'shop', 'baobox', 'insure'].indexOf(bagOperType) !== -1">
						<view class="page-num-view flex flex-all-center">
							<view class="page-num-pre relative flex flex-all-center" @click.stop="prePageFun">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="currentPageIndex === 1 ? `${commonConfigs.domainFrontFileLink}/files/images/bag/page-small-pre.png` : `${commonConfigs.domainFrontFileLink}/files/images/bag/page-small-pre-active.png`"
									class="bg" mode=""></image>
							</view>
							<view class="page-num-box relative flex flex-all-center">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/bag/page-small-num.png`" class="bg"
									mode=""></image>
								<view class="relative font-hanserif-bold">{{ currentPageIndex }}</view>
							</view>
							<view class="page-num-next relative flex flex-all-center" @click.stop="nextPageFun">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="!goodProductList.length || currentPageIndex >= totalNumPage ? `${commonConfigs.domainFrontFileLink}/files/images/bag/page-small-next.png` : `${commonConfigs.domainFrontFileLink}/files/images/bag/page-small-next-active.png`"
									class="bg" mode=""></image>
							</view>
						</view>
						
						<view class="bag-sort flex flex-justify-content-evenly absolute flex-align-items-center"
							@click="showBagSort = !showBagSort">
							<image :src="`${commonConfigs.domainFrontFileLink}/files/images/bag/sort-bg.png`" class="bg"
								mode=""></image>
						</view>
						
						<view class="flex tab-chooses-right">
							<view class="tab-chooses-right-view">
								<text>已选</text>
								<text class="tab-chooses-num">{{ selectAll }}</text> 
								<text>张</text>
							</view>
							<view class="flex-align-items-center tab-chooses-all"
								@click="chooseAllFun(selectAll !== currentPageNum)">
								<image class="tab-chooses-icon"
									:src="selectAll !== currentPageNum || !currentPageNum ? '/static/images/public_imgs/select.png' : '/static/images/public_imgs/selecting.png'"
									mode=""></image>
								<text>全选</text>
							</view>
						</view>
					</view>
				
					<view class="bag-good-box relative"
						:style="{ height: `calc(100vh - ${parseInt(commonNavHeight)}px - 270rpx)` }">
						<view class="bag-goods-list flex flex-wrap" v-if="goodProductList && goodProductList.length">
							<view class="bag-goods-item" v-for="(item, index) in goodProductList" :key="index"
								@click="chooseGoodFun(item)">
								<view class="bag-goods-cover relative">
									<view class="bag-goods-type absolute" v-if="item.item_type">
										<image class="bag-goods-type-img relative"
											v-if="item.item_type && bagOperType !== 'baobox'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + item.item_type.toLowerCase() + '.png'"
											mode="heightFix"></image>
									</view>
									<view class="bag-cover-box relative flex flex-direction-column flex-align-items-center">
										<image v-if="item.chooseFlag && bagOperType === 'baobox'" 
											src="/static/images/public_imgs/preview-item-checked.png"
											class="bg" style="z-index: 98;" mode=""></image>
										<image v-if="item.chooseFlag && bagOperType === 'baobox'"
											src="/static/images/public_imgs/preview-btn-checked.png"
											@click.stop="previewBoxMask(item.reward_item_id, item)"
											class="bg" style="z-index: 98;width: 142rpx;height: 45rpx;left: 0;right: 0;top: 0;bottom: 0;margin: auto;" mode=""></image>
										
										<image src="/static/images/public_imgs/goods-item-checked.png"
											class="bg bag-img-cover-active" v-if="item.chooseFlag" mode=""></image>
										<image class="bg bag-img-cover-border"
											v-if="item.item_type"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/border-` + item.item_type.toLowerCase() + '.png'">
										</image>
										<comPlaceImage class="reward-cover-img" :lazyLoad="true" :src="item.reward_item_cover"
											mode="aspectFill"></comPlaceImage>
				
										<view class="good-num absolute flex flex-all-center" style="white-space: nowrap;"> x
											{{ item.get_num }}
										</view>
				
										<view class="item-name-txt" v-if="showNoticeTxtFun(item.reward_item_name, 8)"
											style="text-align: center;">
											<uni-notice-bar class="uni-notice-bar" color="#111111" background-color="transparent"
												:scrollable="true" :single="true"
												:text="showNoticeTxtFun(item.reward_item_name, 8)" :speed="54"></uni-notice-bar>
										</view>
										<view class="truncate relative" v-else style="text-align: center;">
											{{ item.reward_item_name }}
										</view>
										<view class="item-price-txt relative" v-if="bagOperType !== 'baobox'">
											<template v-if="showNoticeTxtFun(item.recovery_price_balance, 10)">
												<uni-notice-bar class="uni-notice-bar relative" color="#FF8B1D"
													background-color="transparent" :scrollable="true" :single="true"
													:text="item.recovery_price_balance + '机能'" :speed="50"></uni-notice-bar>
											</template>
											<template v-else>
												{{ item.recovery_price_balance + '机能' }}
											</template>
										</view>
									</view>
								</view>
							</view>
				
						</view>
						<view v-else-if="goodProductList && !goodProductList.length && !loading" style="z-index: 0">
							<comEmptyData></comEmptyData>
						</view>
						<comLoading style="width: 100%;height: 100%;" v-if="loading"></comLoading>
					</view>
				
					<view class="oper-box absolute flex-justify-content-evenly flex-align-items-center"
						v-if="bagBtnList && bagBtnList.length">
						
						<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/bag/operation-bg.png`" class="bg" mode="">
						</image> -->
						
						<view class="oper-box-btn relative flex flex-all-center" v-for="(item, index) in bagBtnList"
							v-if="showUserRecovery ? true : (item.show_recovery ? showUserRecovery : true)" :key="item.type"
							@click.stop="handleTypeFun(item)">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/oper-btn-bg.png`" class="bg" mode="">
							</image>
							<view class="flex flex-all-center relative oper-btn-text font-hanserif-bold">
								{{ item.name }}
							</view>
						</view>
						
					</view>
				
					<comPopup v-model="showGoodPopup" :title="goodPopupTitle" class="common-popup">
						<view class="popup-agreement flex flex-end flex-align-items-center" v-for="item in agreeTxtList"
							:key="item.type" v-if="bagTypeBtn === item.type" @click="getAgreeFun(item)">
							<image src="/static/images/public_imgs/agree-icon-bg.png" class="popup-agreement-icon-bg"></image>
							{{ item.title }}
						</view>
				
						<comMarketOrder ref="marketOrder" :list="goodChooseList" @del="delOrderItem"
							@change="bagPreOrderSetFun" :bagOperType="bagOperType"></comMarketOrder>
				
						<template #footer>
							<view class="bag-send-info" v-if="bagTypeBtn === 'sendgoods'">
								<view class=""> 物品总计：￥{{ getBagOrderAllPrice() }} </view>
								<view class="flex flex-justify-content-between flex-align-items-center">
									发货信息：
									<view class="flex flex-full truncate" @click="gooAddressPage">
										<view class="user-info-null" v-if="!address.name"> 请选择用户信息与地址 </view>
										<view class="truncate" v-else>
											<view class="truncate"> {{ address.name || '' }} {{ address.phone || '' }} </view>
											<view class="truncate">
												{{ addreTxtCont || '' }}
											</view>
										</view>
									</view>
									<image src="/static/images/public_imgs/right-item-icon.png" class="send-info-right-icon"
										mode="" @click="gooAddressPage"></image>
								</view>
								<view class=""> 订单运费：{{ sendBagOrderInfo.pay_freight_desc }} </view>
								<view class="flex flex-align-items-center"> 订单留言： <input v-model="leaveMessage" type="text"
										placeholder="选填" class="flex-full" /> </view>
				
								<view class="bag-pay-info">
									<comPayType v-if="showGoodPopup && bagTypeBtn === 'sendgoods'"
										v-model="currentPayType"
										fromSence="bagSence"
										></comPayType>
								</view>
							</view>
				
							<view class="bag-popup-bottom font-hanserif-bold flex flex-justify-content-between flex-align-items-center">
								<view class="">
									<view class="" v-if="bagTypeBtn === 'returngoods'">
										价值：<text class="bag-total-price">¥{{ getBagOrderAllPrice() || 0 }}</text>
									</view>
									<view class="" v-if="bagTypeBtn === 'sendgoods'">
										需支付运费：<text class="bag-total-price">￥{{ sendBagOrderInfo.pay_freight }}</text>
									</view>
								</view>
								<view class="bag-btns-box">
									<view class="bag-popup-btn relative flex-all-center" v-if="bagTypeBtn === 'safebox'" @click="geUserInsureApi(2)"> 移出保险柜 </view>
									<view class="bag-popup-btn relative flex-all-center" v-if="bagTypeBtn === 'returngoods'" @click="geUserRecoveryApi"> 
										<!-- #ifdef MP-WEIXIN -->
										赏品进击
										<!-- #endif -->
										<!-- #ifndef MP-WEIXIN -->
										赏品退货
										<!-- #endif -->
									</view>
									<view class="bag-popup-btn relative flex-all-center" v-if="bagTypeBtn === 'sendgoods'" @click="sendOrderBtn"> 打包发货 </view>
									<view class="bag-popup-btn relative flex-all-center" v-if="bagTypeBtn === 'storebox'" @click="geUserInsureApi(1)"> 存保险柜 </view>
									<view class="bag-popup-btn relative flex-all-center" v-if="bagTypeBtn === 'openbaobox'" @click="setOpenBaoBoxFun"> 开箱 </view>
								</view>
							</view>
						</template>
					</comPopup>
				</view>
				
				<view class="page-side-btns fixed flex flex-direction-column">
					<!-- 开箱记录 -->
					<image v-if="bagOperType === 'baobox'" class="page-side-btn-bg" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/common/record-icon.png`"
						mode="" @click="gooPageFun(`/secondary/openBaoBoxRecordPage/openBaoBoxRecordPage`)"></image>
					
					<view class="page-side-btn-bg" @click.stop="loadDataGetFun('loading')">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/common/side-refresh-icon.png`" mode="">
						</image>
					</view>
					<view class="page-side-btn-bg">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/common/side-note-icon.png`"
							@click="getAgreeFun({ title: '注意事项', onlineType: 15, type: 12 })" mode=""></image>
					</view>
				</view>
				
				<comTextPopup v-model="showAgreeTxtPopup">
					<template #title>
						{{ agreeBoxTitle }}
					</template>
					<view class="" v-html="agreeBoxContent"></view>
				</comTextPopup>
				
				<comPromptPopup v-model="boxSecMask"
					title="发货信息提醒"
					cancelText="取消" 
					confirmText="确认发货" 
					@setSureFun="geUserRewardSendOrderApi">
					<template>
						<view class="box-info-list absolute font-hanserif-regular">
							<view>收货人: {{address.name}}</view>
							<view>联系电话: {{address.phone}}</view>
							<view>详细地址: {{addreTxtCont}}</view>
						</view>
						<view class="bag-send-tip-txt absolute font-hanserif-bold">
							提示: 物品一旦发货，信息不可修改!
						</view>
					</template>
				</comPromptPopup>
				
				<comMask v-model="isShowRewardRes">
					<view class="award-result-uppop relative">
						<view class="award-result-box relative">
							<image
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/reward-box-bg.png`"
								class="bg"
								mode=""
							></image>
							<scroll-view class="" :style="{ height: `calc(100% - 18rpx)` }" scroll-y enable-flex scroll-with-animation>
								<comRewardList :awardData="awardData" v-if="isShowRewardRes"></comRewardList>
							</scroll-view>
						</view>
						<view class="award-result-btns flex flex-justify-content-evenly relative">
							<view class="relative result-btn-img" @click="isShowRewardRes = false">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-btn-back.png`" class="bg" mode=""></image>
							</view>
						</view>
					</view>
				</comMask>
				

			</view>
		</template>
	</comRoot>
</template>

<script>
	import audio from '@/setupproject/AVIDEO_FUN.js';
	import {
		getRewardOpenBoxApi,
		getRewardBoxListApi,
		getUserBalanceOrderConfirmApi,
		geUserInsureListApi,
		geUserItemBagApi,
		getUserShopBagApi,
		geUserInsureApi,
		geUserRecoveryApi,
		getUserRewardSendApi,
		getUserShopProductSendApi,
		geUserRewardSendOrderApi,
		getUserRewardSendPreApi,
		getUserShopProductSendPreApi,
		geUserShopProductSendOrderApi,
		getContentHomeApi,
		getRewardBoxBagApi,
	} from '@/setupproject/INTERFACE';

	import store from '@/store';

	import otherpay from '@/inmixed/otherpay.mixin.js'
	import {
		payment
	} from '@/setupproject/PAYS_FUN';
	import {
		ACTIONS
	} from '@/store/modules/userStore';

	import {
		setAsyncFunWait,
		wxAuthSetFun,
		addPhoneSetFun
	} from '@/setupproject/TOOLS_FUN';
	export default {
		name: 'tabBag',
		mixins: [otherpay],
		props: {
			tabCurrentIndex: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {
				ruleTipType: 31,
				currentPageIndex: 1,
				currentPageNum: 0,
				totalNumPage: 1,
				bagSortItem: '',
				// #ifdef MP-WEIXIN
				showUserRecovery: false,
				// #endif
				// #ifdef APP-PLUS
				showUserRecovery: true,
				// #endif
				loading: false,
				submitLoading: false,
				boxSecMask: false,
				bagOperType: 'bag',
				showBagSort: false,
				tabAreaList: [{
						text: '我的赏品',
						type: 'bag'
					},
					{
						text: '我的商品',
						type: 'shop'
					},
					{
						text: '宝箱',
						type: 'baobox'
					},
					{
						text: '保险柜',
						type: 'insure'
					},
				],
				bagSortList: [{
						name: '按稀有度',
						order_field: 1,
						active: false
					},
					{
						name: '按价值',
						order_field: 2,
						active: false
					},
					{
						name: '按现货',
						order_field: 3,
						active: false
					}
				],
				ABtnList: [
					// #ifdef MP-WEIXIN
					{
						name: '赏品进击',
						type: 'returngoods',
						show_recovery: true
					},
					// #endif
					// #ifndef MP-WEIXIN
					{
						name: '赏品退货',
						type: 'returngoods',
						show_recovery: true
					},
					// #endif
					{
						name: '打包发货',
						type: 'sendgoods'
					},
					{
						name: '存保险柜',
						type: 'storebox'
					}
				],
				BBtnList: [{
					name: '移出保险柜',
					type: 'safebox'
				}],
				CBtnList: [{
					name: '打包发货',
					type: 'sendgoods'
				}],
				DBtnList: [{
					name: '开箱',
					type: 'openbaobox'
				}],
				bagTypeBtn: '',
				titleNameList: [],
				bagBtnList: [],
				bagSortIndex: 2,
				goodProductList: [],
				goodProductCount: 0,
				goodChooseList: [],
				showGoodPopup: false,
				goodPopupTitle: '',
				sendBagOrderInfo: {},
				leaveMessage: '',
				agreeTxtList: [
					{
						title: '保险柜须知',
						type: 'safebox',
						type: 11,
						onlineType: 28
					},
					{
						title: '退货须知',
						type: 'returngoods',
						type: 3,
						onlineType: 23
					},
					{
						title: '发货须知',
						type: 'sendgoods',
						type: 6,
						onlineType: 26
					},
					{
						title: '保险柜须知',
						type: 'storebox',
						type: 11,
						onlineType: 28
					},
					{
						title: '宝箱须知',
						type: 'baobox',
						type: 11,
						onlineType: 28
					},
				],
				showAgreeTxtPopup: false,
				agreeBoxContent: '',
				agreeBoxTitle: '',
				currentPayType: '',
				apiPayTypeVal: null,
				payBeInfos: {
					isPayBackSence: false,
					type: null,
					order_num: null,
					payBeScene: ''
				},
				
				isStartRecovery: true, // 是否开始进击
				
				awardData: [],
				isShowRewardRes: false,
				isOpenBoxing: true,
				
				boxMask: false, //宝箱弹框
				previewLoading: true,
				previewBoxRewardData: [],
			};
		},

		computed: {
			token() {
				return this.$store.getters.token;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			orderPayStatusPopup() {
				return this.$store.getters.orderPayStatusPopup || {};
			},
			selectAll() {
				let num = 0;
				this.goodChooseList.map((item) => (num += item.num));
				return num;
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonOnline() {
				return store.getters.commonOnline;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
			address() {
				return this.$store.getters.address || {};
			},
			addreTxtCont() {
				return `${this.address.province || ''}${this.address.city || ''}${this.address.area || ''}${this.address.detail || ''}`
			},
		},
		watch: {
			showGoodPopup(newValue) {
				if (!newValue) {
					this.submitLoading = false;
					this.bagTypeBtn = '';
				}
			},
			async orderPayStatusPopup(pay_status) {
				if (pay_status) {
					await store.dispatch(ACTIONS.USER_INFO_GET_FUN);
					this.showInvestMoney = false;
				}
			}
		},
		onLoad({
			bagOperType
		}) {
			if (bagOperType) {
				this.bagOperType = bagOperType
			}

			if (this.bagOperType == 'bag') {
				this.bagBtnList = this.ABtnList
			} else if (this.bagOperType == 'shop') {
				this.bagBtnList = this.CBtnList
			} else if (type == 'insure') {
				this.bagBtnList = this.BBtnList
			} else if (type == 'baobox') {
				this.bagBtnList = this.DBtnList
			}
			
			this.loadDataGetFun();
		},
		onShow() {
			// 监听返回当前平台时触发支付结果事件
			if (this.payBeInfos.isPayBackSence && ['adapay_mini', 'alipay', 'yeepay_wx', 'adapay_alipay', 'mbpay_jump_mini'].includes(this.currentPayType)) {
				this.payBeInfos.isPayBackSence = !this.payBeInfos.isPayBackSence;
				this.$store.commit('SET_WATCH_PLAT_PARAMS', {
					'type': this.bagOperType === 'shop' ? 4 : 3,
					'balance_order_num': this.payBeInfos.balance_order_num,
					'msg': '发货成功!',
					'isCar': true,
				});
			}
		},
		methods: {
			gooShopDetailFun(item, index) {
				this.$store.commit('INFINITE_DETAILS_SET_FUN', item);
				
				uni.navigateTo({
					url: `/secondary/goodDetailPage/goodDetailPage?type=boxReward`
				});
			},
			
			async previewBoxMask(id, item) {
				console.log("openBoxMask:")
				// 不弹框，跳转宝箱详情页
				return uni.navigateTo({
					url: `/secondary/boxDetailPage/boxDetailPage?id=${id}`
				});
				
				this.previewLoading = true;
				this.boxMask = true;
				
				const {
					data,
					code,
					msg
				} = await getRewardBoxListApi({
					id, // id	是	int	宝箱ID
				});
			
				if (code !== 200) {
					this.previewLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				
				this.previewBoxRewardData = data.reward_item;
			
				this.previewLoading = false;
			},
			closeBoxMask() {
				this.boxMask = false;
			},
			
			gooAddressPage() {
				uni.navigateTo({
					url: '/secondary/personInfoPage/personInfoPage?type=1&fromType=bag'
				});
			},

			gooPageUrl(url) {
				uni.navigateTo({
					url: url
				});
			},

			closeBoxSecMask() {
				this.boxSecMask = false;
			},

			sendOrderBtn() {
				if (this.submitLoading) return;
				if (!this.address.name) {
					uni.showToast({
						title: '请选择地址哦~',
						icon: 'none'
					});
					setTimeout(() => {
						this.gooAddressPage();
					}, 1000);
					return;
				}
				this.boxSecMask = true;
			},

			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},

			chooseItemToRewardItem(item) {
				return {
					item_key: item.item_key || 0,
					reward_item_num: item.varNum || 0,
					reward_item_id: item.id,
				};
			},
			getBagOrderList() {
				return this.$refs.marketOrder.cardList.map(this.chooseItemToRewardItem);
			},

			tabTypeClick(type) {
				if (type == 'bag') {
					this.bagBtnList = this.ABtnList
				} else if (type == 'shop') {
					this.bagBtnList = this.CBtnList
				} else if (type == 'insure') {
					this.bagBtnList = this.BBtnList
				} else if (type == 'baobox') {
					this.bagBtnList = this.DBtnList
				}
				
				this.currentPageIndex = 1;
				this.bagOperType = type;
				this.bagSortIndex = 2;
				this.bagSortItem = ''
				this.showBagSort = false;

				this.getBagGoodsList();
			},
			
			gooPageFun(url) {
				if (!url) return;
			
				uni.navigateTo({
					url
				});
			},

			// 父组件tabbar触发当前子组件事件
			async loadDataGetFun(e) {
				// #ifdef MP-WEIXIN
				this.showUserRecovery = this.userInfo.show_recovery;
				// #endif

				this.bagSortItem = '';
				this.currentPageIndex = 1;
				this.bagSortIndex = 2;

				if (e === 'loading') {
					store.commit('SHOW_LOADING_SET_FUN', true);
					await this.getBagGoodsList();
					store.commit('SHOW_LOADING_SET_FUN', false);
				} else {
					await this.getBagGoodsList();
				}

				this.$store.dispatch('ADDRESS_SET_FUN');

				// #ifdef MP-WEIXIN
				if (this.token) {
					await this.$store.dispatch('USER_INFO_GET_FUN');
					this.showUserRecovery = this.userInfo.show_recovery;
				}
				// #endif
			},

			changeBagSortType(item) {
				this.currentPageIndex = 1;
				this.bagSortList.map(child => {
					if (child.order_field === item.order_field) {
						child.active = !child.active
					} else {
						child.active = false
					}
				})
				this.showBagSort = false;
				this.bagSortIndex = item.order_field;
				this.bagSortItem = item
				this.getBagGoodsList(item.order_field, item.active);
			},

			async getBagGoodsList(type, active) {
				this.goodProductCount = 0;
				this.goodProductList = [];

				let params = type ? {
					order_field: type,
					order_sort: active ? 'asc' : 'desc'
				} : {};
				let res = '';
				params.page_size = 40;
				params.page = this.currentPageIndex;

				this.loading = this.token ? true : false;
				this.goodChooseList = [];

				if (this.bagOperType === 'bag') {
					res = await geUserItemBagApi(params);
				} else if (this.bagOperType === 'shop') {
					res = await getUserShopBagApi(params);
				} else if (this.bagOperType === 'insure') {
					res = await geUserInsureListApi(params);
				} else if (this.bagOperType === 'baobox') {
					res = await getRewardBoxBagApi(params);
					res.data.product_bag = res.data.bag_list;
				}

				this.loading = false;
				if (res.code != 200) {
					return;
				}

				this.goodProductCount = res.data.count;
				this.totalNumPage = Math.ceil(res.data.total / res.data.pageSize);
				this.currentPageNum = 0;
				this.goodProductList = res.data.product_bag.map((item) => {
					item.item_type = item.item_type || 'baobox';
					item.chooseFlag = false;
					this.currentPageNum += item.get_num;
					return item;
				});
			},

			prePageFun() {
				if (this.currentPageIndex <= 1) {
					return;
				}
				this.pageIndex--;
				this.getBagGoodsList(this.bagSortItem.order_field, this.bagSortItem.active);
			},

			nextPageFun() {
				if (this.currentPageIndex >= this.totalNumPage) {
					return;
				}
				this.currentPageIndex++;
				this.getBagGoodsList(this.bagSortItem.order_field, this.bagSortItem.active);
			},

			chooseAllFun(flag) {
				this.goodProductList.map((item) => {
					item.chooseFlag = flag;
				});
				this.goodChooseList = flag ? this.goodProductList : [];
				this.goodChooseList = this.goodChooseList.map((item) => {
					return {
						price: item.recovery_price,
						varNum: item.get_num,
						item_type: item.item_type,
						showDel: true,
						image: item.reward_item_cover,
						name: item.reward_item_name,
						num: item.get_num,
						id: item.reward_item_id,
						item_key: item.item_key,
					};
				});
			},

			chooseGoodFun(item) {
				item.chooseFlag = !item.chooseFlag;

				this.goodChooseList = this.goodProductList
					.filter((item) => {
						return item.chooseFlag;
					})
					.map((item) => {
						return {
							price: item.recovery_price,
							varNum: item.get_num,
							item_type: item.item_type,
							showDel: true,
							image: item.reward_item_cover,
							name: item.reward_item_name,
							num: item.get_num,
							id: item.reward_item_id,
							item_key: item.item_key,
						};
					});
			},

			async handleTypeFun(item) {
				// #ifdef APP-PLUS
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
				
				if (!this.goodChooseList.length) {
					let title = '';
					
					if(this.bagOperType === 'bag') {
						title = '请先选择赏品！'
					} else if (this.bagOperType === 'shop') {
						title = '请先选择商品！'
					} else if (this.bagOperType === 'baobox') {
						title = '请先选择宝箱！'
					} else {
						title = '请先选择物品！'
					}
					
					return uni.showToast({
						title,
						icon: 'none'
					});
				}
				
				let getBagOrderList = this.getBagOrderList();
				if (this.bagOperType === 'baobox' && getBagOrderList && getBagOrderList.length > 1) {
					return uni.showToast({
						title: '只可选一种宝箱!',
						icon: 'error'
					});
				}
				
				this.bagTypeBtn = item.type;

				this.bagBtnList.map((btnItem) => {
					if (item.type === btnItem.type) {
						return (this.goodPopupTitle = btnItem.name);
					}
				});
				this.bagPreOrderSetFun();
				this.showGoodPopup = true;
			},

			async getAgreeFun(item) {
				let type = '';

				if (this.commonOnline) {
					type = item.onlineType;
				} else {
					type = item.type;
				}

				const {
					data,
					code
				} = await getContentHomeApi({
					type
				});

				if (code !== 200) {
					return;
				}
				this.agreeBoxTitle = item.title;

				this.agreeBoxContent = data.content;

				this.showAgreeTxtPopup = true;
			},

			getBagOrderAllPrice() {
				return this.$refs.marketOrder && this.$refs.marketOrder.allPrice;
			},

			async delOrderItem(item) {
				this.goodChooseList = this.goodChooseList.filter((listItem) => {
					return listItem.id !== item.id;
				});

				this.goodProductList.map((listItem) => {
					if (listItem.reward_item_id === item.id) {
						listItem.chooseFlag = false;
					}
				});

				if (!this.goodChooseList.length) {
					this.showGoodPopup = false;
				}
			},

			async geUserInsureApi(type) {
				const {
					code,
					data,
					msg
				} = await geUserInsureApi({
					type,
					reward_item_list: this.getBagOrderList()
				});

				if (code !== 200) {
					return uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
				
				await uni.showToast({
					title: ['', '已存至保险柜~', '已移出保险柜~'][type],
					icon: 'none'
				});

				await setAsyncFunWait(800);

				this.showGoodPopup = false;
				this.loadDataGetFun();
			},

			async geUserRecoveryApi() {
				if(!this.isStartRecovery) return;
				this.isStartRecovery = false;
				
				const {
					code,
					data,
					msg
				} = await geUserRecoveryApi({
					reward_item_list: this.getBagOrderList(),
					recovery_price: this.getBagOrderAllPrice(),
				});

				uni.showToast({
					title: msg,
					icon: code !== 200 ? 'none' : 'success'
				});

				if (code !== 200) {
					return this.isStartRecovery = true;
				}
				
				await setAsyncFunWait(800);

				await (this.showGoodPopup = false);
				await this.loadDataGetFun();
				
				await (this.isStartRecovery = true);
			},
			
			async setOpenBaoBoxFun() {
				let getBagOrderList = this.getBagOrderList();
			
				if(!this.isOpenBoxing) return;
				this.isOpenBoxing = false;
				
				const { data, msg, code } = await getRewardOpenBoxApi({
					item_key: getBagOrderList[0].item_key, // item_key	是	string	键值对
					reward_num: getBagOrderList[0].reward_item_num, // reward_num	是	int	开启数量
				});
			
				if (code !== 200) {
					this.isOpenBoxing = true;
					return uni.showToast({
						icon: 'none',
						title: msg,
						duration: 2000
					});
				}
			
				this.awardData = [];
				this.showGoodPopup = false;
			
				// for (let item of data.sort_detail) {
				for (let item of data.detail) {
					// item.reward_item_type = item.item_type;
					this.awardData.push(item);
				}
			
				this.isShowRewardRes = true;
				await this.loadDataGetFun();
				await setAsyncFunWait(800);
				
				uni.showToast({
					icon: 'none',
					title: msg,
					mask: true,
					duration: 500,
				});
			
				this.isOpenBoxing = true;
			},

			bagPreOrderSetFun() {
				if (this.bagTypeBtn === 'sendgoods' && this.getBagOrderList().length) {
					this.getBagSendOrderInfo();
				}
			},

			async getBagSendOrderInfo() {
				const {
					data
				} = this.bagOperType === 'bag' ? await getUserRewardSendPreApi({
					reward_item_list: this.getBagOrderList()
				}) : await getUserShopProductSendPreApi({
					reward_item_list: this.getBagOrderList()
				});
				this.sendBagOrderInfo = data;
			},

			async orderResSending(balance_order_num) {
				const {
					code
				} = await getUserBalanceOrderConfirmApi({
					type: this.bagOperType === 'shop' ? 4 : 3, // type	赏卡发货订单 3， 商品发货4
					balance_order_num
				});
				this.submitLoading = false;
				this.showGoodPopup = false;
				this.boxSecMask = false;
				if (code === 200) {
					uni.showToast({
						title: '发货成功!',
						icon: 'success'
					});
				}
				await setAsyncFunWait(1200);
				store.dispatch(ACTIONS.USER_INFO_GET_FUN);
				this.loadDataGetFun();
			},

			async geUserRewardSendOrderApi() {
				this.submitLoading = true;
				let payType = this.currentPayType || 'wxpay';

				let params = {
					address: this.addreTxtCont,
					desc: this.leaveMessage,
					reward_item_list: this.getBagOrderList(),
					pay_channel: payType,
					name: this.address.name,
					phone: this.address.phone,
					zip_code: this.address.postalCode || this.address.nationalCode,
				}
				
				const {
					data,
					msg,
					code
				} = this.bagOperType === 'bag' ? await geUserRewardSendOrderApi(params) : await geUserShopProductSendOrderApi(params);

				if (code !== 200) {
					this.submitLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}

				if (!data.is_need_wx_pay) {
					const {
						code,
						msg
					} = this.bagOperType === 'bag' ? await getUserRewardSendApi({
						send_order_num: data.send_order_num
					}) : await getUserShopProductSendApi({
						send_order_num: data.send_order_num
					});
					this.showGoodPopup = false;
					this.boxSecMask = false;
					if (code !== 200) {
						this.submitLoading = false;
						return uni.showToast({
							title: msg,
							icon: 'none'
						});
					}
					setAsyncFunWait(80);
					this.submitLoading = false;
					this.getBagGoodsList();

					return uni.showToast({
						title: '发货成功!',
						icon: 'success'
					});
				}

				if (['adapay_mini', 'yeepay_wx', 'adapay_alipay', 'mbpay_jump_mini'].includes(payType)) {
					try {
						if (data.is_need_wx_pay) {
							data.balance_order_num = data.send_order_num || data.send_platform_order_num;
							this.apiType = this.bagOperType === 'shop' ? 4 : 3;
							return this.launchMPToPayFun(data, payType, 'bag');
						} else {
							this.bagOperType === 'bag' ? await getUserRewardSendApi({
								send_order_num: data.send_order_num
							}) : await getUserShopProductSendApi({
								send_order_num: data.send_order_num
							});
						}

						this.submitLoading = false;
						this.showGoodPopup = false;
						this.boxSecMask = false;
					} catch (e) {
						this.submitLoading = false;
						console.error(e)
					}
					return;
				}

				if (['wxapp', 'wxpay', 'alipay_method', 'mbpay_wxmini'].indexOf(payType) !== -1) {
					try {
						this.apiPayTypeVal = (this.bagOperType === 'shop' ? 4 : 3); // type	赏卡发货订单 3， 商品发货4
						await payment(data, this.currentPayType || 'wxpay', this.apiPayTypeVal);
						const {
							code
						} = await getUserBalanceOrderConfirmApi({
							type: this.bagOperType === 'shop' ? 4 : 3, // type 赏卡发货订单 3， 商品发货4
							balance_order_num: data.send_order_num
						});
						this.submitLoading = false;
						this.showGoodPopup = false;
						this.boxSecMask = false;
						if (code === 200) {
							uni.showToast({
								title: '发货成功!',
								icon: 'success'
							});
						}
						await setAsyncFunWait(1200);
						store.dispatch(ACTIONS.USER_INFO_GET_FUN);
						this.loadDataGetFun();
					} catch (err) {
						this.submitLoading = false;
						console.error(err);
					}
					return;
				}


			},

		}
	};
</script>

<style scoped lang="scss">
	.bag-page {
		color: #fff;
		
			.tabbar-box {
				width: 100%;
				height: 56rpx;
		
				.tabbar-box-item {
					width: 175rpx;
					height: 56rpx;
					font-weight: 800;
					font-size: 28rpx;
					
					margin: 0 20rpx;
					color: #E1E4E7;
		
					&>.active {
						color: #FFF;
					}
				}
			}
		
			.bag-sort {
				width: 110rpx;
				height: 44rpx;
				font-size: 22rpx;
				color: #666;
				right: 220rpx;
				top: -2rpx;
			}
		
			.bag-sort-box {
				width: 196rpx;
				top: 298rpx;
				right: 236rpx;
				font-size: 28rpx;
				color: #FFF;
				z-index: 100;
				background-size: 100% 100%;
		
				.bag-sort-item {
					width: 100%;
					font-size: 20rpx;
					height: 62rpx;
		
					&.active {
						font-weight: 800;
						color: #FFDA4D;
					}
				}
		
				.bag-sort-item:last-child {
					border-bottom: none;
				}
		
				.bag-sort-icon {
					width: 18rpx;
					height: 20rpx;
					margin-left: 12rpx;
				}
			}
		
			.tab-chooses {
				font-size: 26rpx;
				margin: 24rpx 18rpx;
		
				.tab-chooses-right {
					color: #111111;
		
					.tab-chooses-num {
						color: #FF8B1D;
						margin: 0 4rpx;
					}
		
					.tab-chooses-all {
						color: #111111;
						margin-left: 12rpx;
						font-size: 24rpx;
		
						.tab-chooses-icon {
							margin-right: 8rpx;
							width: 22rpx;
							height: 22rpx;
						}
					}
				}
			}
		
			.bag-good-box {
				padding-bottom: 82rpx;
				overflow-y: auto;
				overflow-x: hidden;
		
				.bag-goods-list {
					margin-bottom: 190rpx;
					padding: 12rpx 18rpx;
				}
		
				.bag-goods-item {
					width: 162rpx;
					margin: 0 20rpx 22rpx 0;
					font-size: 18rpx;
					color: #111111;
		
					&.bag-goods-item:nth-child(4n) {
						margin-right: 0;
					}
		
					.bag-goods-cover {
						margin-bottom: 4rpx;
		
						.bag-goods-type {
							top: 8rpx;
							left: 8rpx;
		
							.bag-goods-type-img {
								height: 24rpx;
								z-index: 98;
							}
						}
		
						.bag-cover-box {
							width: 162rpx;
							height: 242rpx;
							padding-top: 36rpx;
		
							.bag-img-cover-active {
								width: 191rpx;
								height: 271rpx;
								left: -14rpx;
								top: -14rpx;
								z-index: 97;
							}
		
							.reward-cover-img {
								border-radius: 8rpx;
								width: 132rpx;
								height: 139rpx;
								margin-bottom: 8rpx;
							}
		
							.bag-img-cover-border {
								width: 162rpx;
							}
						}
		
						.good-num {
							width: 60rpx;
							height: 28rpx;
							bottom: 70rpx;
							right: 16rpx;
							color: #ffffff;
							background: rgba(0, 0, 0, 1);
							border-radius: 0rpx 0rpx 12rpx 0rpx;
							z-index: 10;
						}
					}
		
					.product-price {
						color: #FF8B1D;
					}
		
					.item-name-txt {
						height: 26rpx;
						padding: 4rpx 4rpx 0;
						width: 100%;
					}
		
					.item-price-txt {
						top: 6rpx;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 20rpx;
						color: #FF8B1D;
						white-space: nowrap;
						text-align: center;
					}
				}
		
			}
		
			.oper-box {
				left: 0;
				bottom: 150rpx;
				z-index: 1000;
				width: 100%;
				height: 58rpx;
		
				.oper-box-btn {
					width: 182rpx;
					height: 58rpx;
		
					.oper-btn-text {
						font-size: 30rpx;
						font-weight: 800;
						color: #0069C9;
					}
				}
			}
		
			.common-popup {
				.popup-agreement {
					font-size: 20rpx;
					font-weight: 500;
					align-items: center;
					margin: 0 20rpx 10rpx 0;
		
					.popup-agreement-icon-bg {
						margin-right: 10rpx;
						width: 20rpx;
						height: 20rpx;
					}
				}
		
				.bag-send-info {
					font-size: 24rpx;
					color: #666666;
					&>view {
						padding: 18rpx 0;
					}
		
					.send-info-right-icon {
						width: 16rpx;
						height: 18rpx;
					}
		
					.bag-pay-info {
						margin: 0 -28rpx;
					}
				}
		
				.bag-popup-bottom {
					padding: 30rpx 0;
					color: #111111;
					.bag-btns-box {
						.bag-popup-btn {
							font-size: 38rpx;
							background: url('/static/images/public_imgs/popup-sure-btn-bg.png');
							background-size: 100% 100%;
							color: #FFFFFF;
							width: 243rpx;
							height: 80rpx;
						}
					}
		
					.bag-total-price {
						font-size: 48rpx;
						color: #FF8B1D;
					}
				}
			}
		
			// 侧边按钮
			.page-side-btns {
				right: 10rpx;
				bottom: 420rpx;
				z-index: 110;
		
				.page-side-btn-bg {
					width: 150rpx;
					height: 120rpx;
					margin-bottom: 60rpx;
		
					&>image {
						width: 100%;
						height: 100%;
					}
					
					&:first-child {
						margin-top: 0;
					}
				}
			}
		
	}
	
	.page-num-view {
		width: 360rpx;
	
		.page-num-box {
			font-size: 24rpx;
			color: #FFFDE3;
			width: 106rpx;
			height: 35rpx;
			z-index: 100;
		}
	
		.page-num-pre {
			width: 106rpx;
			height: 35rpx;
			margin-right: 10rpx;
		}
	
		.page-num-next {
			width: 106rpx;
			height: 35rpx;
			margin-left: 10rpx;
		}
	}
	
	.box-info-list {
		width: 100%;
		height: 198rpx;
		font-size: 30rpx;
		color: #111111;
		left: 0;
		right: 0;
		top: 0rpx;
		margin: auto;
		overflow-y: auto;
	}
	
	.bag-send-tip-txt {
		font-size: 24rpx;
		color: #FF8B1D;
		width: 100%;
		text-align: center;
		left: 0;
		right: 0;
		bottom: -82rpx;
		margin: auto;
	}
	
	.award-result-uppop {
		font-size: 22rpx;
		color: #111111;
		padding: 0 30rpx;
		
		.award-result-box {
			width: 670rpx;
			height: 782rpx;
			padding-top: 80rpx;
		}
	
		.award-result-btns {
			height: 70rpx;
			margin-top: 32rpx;
			
			.result-btn-img {
				width: 214rpx;
				height: 70rpx;
			}
		}
	}
	
	// 弹框蒙版
	.mask-view {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		color: #fff;
	
		// 宝箱弹框
		.box-content {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 750rpx;
			height: 1150rpx;
			padding: 0 25rpx;
	
			.box-content-list {
				left: 0;
				right: 0;
				top: 330rpx;
				margin: auto;
				width: 600rpx;
				height: 780rpx;
				overflow-x: hidden;
				overflow-y: auto;
				flex-wrap: wrap;
				align-content: flex-start;
				
				.bag-goods-list {
					padding: 12rpx 18rpx;
					color: #FFF;
				}
					
				.content-pool-detail {
					width: 160rpx;
					margin-right: 10rpx;
					margin-bottom: 22rpx;
					
					.bag-goods-type {
						top: 6rpx;
						left: 6rpx;
						
						.bag-goods-type-img {
							height: 34rpx;
							z-index: 98;
						}
					}
					
					.content-pool-cover {
						width: 160rpx;
						height: 177rpx;
						
						.pool-cover-img {
							width: 126rpx;
							height: 130rpx;
							overflow: hidden;
						}
					}
					
					.content-pool-txt {
						width: 100%;
						height: 26rpx;
						line-height: 26rpx;
						color: #23220C;
						font-size: 26rpx;
						text-align: center;
						margin-top: 6rpx;
					}
					
					.content-item-price {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #88875A;
						text-align: center;
					}
					
					.content-item-rate {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #D56E28;
						text-align: center;
					}
						
				}
				
			}
	
			.box-close-box {
				left: 0;
				right: 0;
				bottom: -100rpx;
				margin: auto;
				width: 100rpx;
				height: 100rpx;
				text-align: center;
			}
		}
		
	}
	
</style>